<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <template v-if="!btnCustom">
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </template>
    <template v-else>
      <div class="custom-button button-prev" v-if="$slots['button-prev']">
        <slot name="button-prev"></slot>
      </div>
      <div class="custom-button button-next" v-if="$slots['button-next']">
        <slot name="button-next"></slot>
      </div>
    </template>

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
  </div>
</template>

<script>
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.min.css";

export default {
  name: "Swiper",
  props: {
    // 上一张 / 下一张 按钮是否自定义，值为false,自定义无效
    btnCustom: {
      type: Boolean,
      default: false,
    },
  },

  mounted() {
    let navigation = {
      prevEl: this.btnCustom ? ".button-prev" : ".swiper-button-prev",
      nextEl: this.btnCustom ? ".button-next" : ".swiper-button-next",
    };
    new Swiper(".swiper-container", {
      loop: true,
      loopAdditionalSlides: 1,
      autoplay: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation,
    });
  },
};
</script>

<style>
.swiper-pagination-bullet {
  /* 这里设置分页器未激活的颜色 */
  background: black;
}

.swiper-pagination-bullet-active {
  /* 这里设置分页器激活的颜色 */
  background: red;
}

/* 以下为自定义btn按钮的样式 */
.custom-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}
</style>
